<template>
    <div class="container">
        <header-navbar/>
        <div class="news-wrapper">
            <div class="post-list">
                <div class="post-item border-bottom" @click="goDetail(item.id)" v-for="item in article" :key="item.id">
                    <div class="post-img">
                        <img src="@/assets/styles/images/post-img4.jpg" alt="">
                    </div>
                    <div class="post-details">
                        <div class="post-title">
                            <span>{{ item.title }}</span>
                        </div>
                        <div class="post-desc">
                            <span>{{ item.desc }}</span>
                        </div>
                        <div class="post-tags">
                            <span class="border" v-if="item.is_front">前端开发</span>
                            <span class="border" v-if="item.is_after">后端开发</span>
                        </div>
                    </div>
                    <div class="poster">
                        <div class="post-avatar">
                            <img src="@/assets/styles/images/avatar2.jpg" alt="">
                        </div>
                        <div class="post-time">
                            <span>{{ item.poster }}</span>
                            <span>{{item.create_time}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import HeaderNav from '@/components/HeaderNavbar'
    import {getDataByList, getDataById} from '@/api/article'
    import {mapMutations} from 'vuex';

    export default {
        name: "News",
        data() {
            return {
                article: [],
            }
        },
        components: {
            HeaderNavbar: HeaderNav
        },
        methods: {
            ...mapMutations(['saveItem','saveList']),
            getArticle() {
                getDataByList().then(res => {
                    this.article = res.data.data;
                }).catch(err => {
                    console.log(err);
                })
            },
            goDetail (id) {
                getDataById(id).then(res=>{
                    let data = res.data;
                    this.saveItem({value: data})
                });
                this.$router.push('/details/'+id)
            }
        },
        mounted() {
            this.getArticle();
        }
    }
</script>

<style lang="stylus" scoped>
    @import "~@/assets/styles/css/variable.styl"
    .news-wrapper
        padding: $commonPadding
        .post-list
            border: 1px solid #f9f9f9;
            box-shadow: 0 0 10px 5px #f5f5f5;
            .post-item
                display: flex;
                width: 100%;
                background: #fff;
                padding: 10px 0;
                .post-img
                    width: 12%;
                    padding: 5px 10px 0;
                    img
                        width: 100%;
                .post-details
                    width: 65%;
                    margin-left: 10px;
                    .post-title
                        font-size: 16px;
                        font-weight: 600;
                        color: #333;
                        padding: 15px 0;
                        &:hover
                            color: $themeColor;
                            cursor: pointer;
                    .post-desc
                        font-size: 14px;
                        color: #737373;
                        font-weight: 400;
                        width: 550px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    .post-tags
                        margin-top: 10px;
                        span
                            padding: 0 8px;
                            color: $themeColor
                            font-size: 12px;
                            font-weight 400;
                            margin-right: 5px;
                            &:before
                                border-color: $themeColor
                .poster
                    width: 25%;
                    display: flex;
                    .post-avatar
                        width: 13%;
                        padding-top: 40px;
                        img
                            width: 100%;
                            border-radius: 50%;
                    .post-time
                        font-size: 12px;
                        padding-top: 45px;
                        span
                            margin: 0 5px;
                            &:last-child
                                color: #828282;
</style>